<template>
  <div class="home-category-brand">
    <img v-lazy="brand.picture"/>
    <div>
      <span class="ellipsis">{{ brand.place }}</span>
      <span class="ellipsis-2">{{ brand.name }}</span>
      <span class="ellipsis">{{ brand.desc }}</span>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import type {Brand} from '@/types/category'
import {toRefs} from 'vue'

let props = defineProps<{
  data: Brand
}>()

let {data: brand} = toRefs(props)
</script>

<style lang="less"
       scoped>
.home-category-brand {
  width: 308px;
  padding: 12px;
  margin: 0 12px 20px 0;
  background-color: #ffffff;
  display: flex;
  cursor: pointer;

  &:hover {
    background: #e3f9f4;
  }

  img {
    width: 120px;
    height: 160px;
    margin-right: 12px;
  }

  div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;

    span {
      margin-top: 8px;
      line-height: 24px;

      &:nth-of-type(2) {
        font-size: 16px;
        color: #666;
      }

      &:nth-of-type(1), &:nth-of-type(3) {
        color: #999;
      }
    }
  }
}
</style>